<template>
	<ul class="zxyh-footer-ul">
		<li v-for="(item,i) of navData" :key="i" class="tabItem" @click.native="linkLive" :class="{'router-link-active':myPath===item.url}">
			<template v-if="item.hasRouter">
				<a href="javascript:void(0)" @click="goFullView(item.url)">
					<div :class='item.iconClass'></div>
					<p class=" nav-icon-title">{{ item.title}}</p>
				</a>
			</template>
			<template v-else>
				<li id="middle-logo">
		          <img v-if="isPlay" class="back-play" src="../../assets/images/zyzq/play.png" @click="backPlay">
		          <img v-else class="nav3" :src="sysInfo.icon +'?x-oss-process=image/resize,m_fixed,h_98,w_98'">
				</li>
			</template>
		</li>
	</ul>
</template>
<script>
	import fun from "../../util/function";
	export default {
		data() {
			return {
				myPath: '', //路由地址 url
				navData: [{
						url: 'home',
						iconClass: 'navIconPic_1',
						title: '首页',
						hasRouter: true,
					},
					{
						url: 'freChannel',
						iconClass: 'navChannelIcon',
						title: '特色频道',
						hasRouter: true,
					},
					{
						url: 'mine',
						iconClass: 'navIconPic_5',
						title: '个人中心',
						hasRouter: true
					}
        ],
        bottom: true,
        isPlay: false,
        backVideoUrl: this.$lockr.get('PlayBackVideoUrl')
			}
		},
		created(){
      this.mobMsg()
      this.$store.dispatch("showNav")
      
		},
		mounted() {
      // 初始化页面navTab高亮显示
      this.myPath = this.$route.path.split('/')[2];
      //显示底部播放按钮否 ？
      if (this.backVideoUrl) {
        this.isPlay = true
      }
		},
		watch: {
			// 监听路由navTab高亮显示
			$route(to, from) {
        this.myPath = to.path.split('/')[2];
			}
		},
		props: {},
		computed: {
			sysInfo() {
				return this.$store.state.SysOrgInfo;
      }
		},
		methods: {
			linkLive() {
				this.$store.state.liveNavCur = 1;
			},
			goFullView(url) {//zxxykzx 游客可以进入我的页面
				this.$router.push(`/${this.$channel}/${url}`)
      },
      mobMsg(){
        this.$emit('update:msgParent', this.bottom)
      },
      backPlay(){//观看  最后一次浏览过的某 直播间、精彩视频
        window.location.href = this.backVideoUrl
      }
		}
	};
</script>
<style scoped="scoped">
  
	@keyframes keyNavBottom{
  	0%{
  		transform: scale(1);
  	}
  	25%{transform: scale(1.1);
   }
  	50%{transform: scale(0.9);
   }
   75%{transform: scale(1.1);
   }
  	100%{
  		transform: scale(1);
  	}
  }
  
  .zxyh-footer-ul{
	height:98px;
	display: flex;
	display: -webkit-flex;
	justify-content: space-around;
	-webkit-justify-content: space-around;
	align-items: center;
	border-top: 1px solid #F3F3F3;
 }

 .zxyh-footer-ul li{
    width: 19%;
		height: 92%;
  }

	#middle-logo{
    width: 98px;
		height: 98px;
		position: absolute;
		bottom: 10px;
  }
  
  #middle-logo img {
    display: block;
    width: 98px;
    height: 98px;
  }
	.tabItem a {
		display: block;
		width: 100%;
  }
  
	.router-link-active p {
		color: #E12D36;
	}
	.tabItem div {
		width: 40px;
		height: 40px;
    margin: 0 auto;
	}

	.router-link-active .navIconPic_1 {
		background: url("../../assets/images/zxyh/zxyh-home2.png") no-repeat;
		background-size: 40px;
		animation: keyNavBottom 0.3s ease-in;
	}

	.navIconPic_1 {
		background: url("../../assets/images/zxyh/zxyh-home1.png") no-repeat;
		background-size: 40px;
	}

  .router-link-active .navChannelIcon {
		background: url("../../assets/images/zxyh/zxyh-fre2.png") no-repeat;
		background-size: 40px;
		animation: keyNavBottom 0.3s ease-in;
	}

	.navChannelIcon {
		background: url("../../assets/images/zxyh/zxyh-fre1.png") no-repeat;
		background-size: 40px;
	}

	.router-link-active .navIconPic_5 {
		background: url("../../assets/images/zxyh/zxyh-mine2.png") no-repeat;
		background-size: 40px;
		animation: keyNavBottom 0.3s ease-in;
	}

	.navIconPic_5 {
		background: url("../../assets/images/zxyh/zxyh-mine1.png") no-repeat;
		background-size: 40px;
  }
  .nav-icon-title {
    height: auto;
    color: #CCCCCCFF;
    font-size: 20px;
		text-align: center;
		margin-top: 10px;
  }
  #middle-logo .back-play {
    width: 90px;
    height: 80px;
  }
  /* 去掉img标签的默认灰色边框 */
  img[src=""],img:not([src]) {
     opacity:0;
  }
</style>
